<template>
<!--  主页南丁格尔图-->
  <div id="rose-pie" style="height: 280px; width: 160px; margin: 0 auto;"></div>
</template>

<script>
export default {
  name: "RosePie",
  methods: {
    myRoseChat() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('rose-pie'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        darkMode: true,
        color: ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'],
        legend: {
          bottom: '1%',
          textStyle: {
            color: '#FFF'
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true},
          }
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: 70,
            center: ['40%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            label: {
              position: 'inside'
            },
            data: [
              {value: 40, name: '污水'},
              {value: 38, name: '通讯'},
              {value: 32, name: '供电'},
              {value: 30, name: '燃气'},
              {value: 28, name: '雨水'}
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.myRoseChat()
  }
}
</script>

<style scoped>

</style>